<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div class="execution">
    <!--添加tab切换栏-->
    <template>
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick" class="tabContent">
      <el-tab-pane label="订单详情" name="orderDetail">-->
      <!--切换订单详情显示的内容-->
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <router-link to="/reporting/inventory">库存上报</router-link>
          </el-breadcrumb-item>
          <el-breadcrumb-item>库存上报详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <basic-container>
        <h2 class="io-goods-detail">基础信息</h2>
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6">
              <div class="grid-content bg-purple">上报编号：{{ topData.reportSn }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">上报人：{{ topData.reportMan }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple"></div>
              客户：{{ topData.customerName }}
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light"></div>
              销售日期:{{ topData.reportDate }}
            </el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6">
              <div class="grid-content bg-purple-light">其它金额：{{ topData.otherAmount }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">商品合计金额：{{ topData.goodsTotalAmount }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">总计金额：{{ topData.totalAmount }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">优惠金额：{{ topData.couponAmount }}</div>
            </el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6">
              <div class="grid-content bg-purple">上报位置：{{ topData.reportAddress }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">上报状态：{{ topData.reportStatus }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">上报时间：{{ topData.createDate }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">备注：{{ topData.remarks }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="common-height">
            <el-col :span="24">
              <div class="grid-content bg-purple text-left flex">
                <div>拜访图片：</div>
                <div
                  v-for="(item,index) in topData.photoList"
                  v-if="topData.photoList"
                  class="thumbUrl m-l"
                >
                  <el-image
                    :src="item.picUrl"
                    :preview-src-list="[item.picUrl]"
                    style="width: 100px; height: 100px"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
      </basic-container>
      <basic-container>
        <h2 class="io-goods-detail">库存上报商品清单</h2>
        <template>
          <el-table
            :data="tableData"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            style="width: 100%"
          >
            <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
            <el-table-column label="销售商品类型" prop="goodsType" align="center"></el-table-column>
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.goodsImg" height="50px" />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
            <el-table-column label="商品规格" prop="modelAttr" align="center"></el-table-column>
            <el-table-column label="单位" prop="goodsUnit" align="center"></el-table-column>
            <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
            <el-table-column label="商品价格" prop="tradePrice" align="center"></el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsNum * scope.row.tradePrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期" width="150px" prop="expiration" align="center"></el-table-column>
            <el-table-column label="生产日期" width="160px" prop="productTime" align="center"></el-table-column>
            <el-table-column label="到期日期" width="160px" prop="maturityTime" align="center"></el-table-column>
            <!-- <el-table-column label="商品种类" prop="modelAttr" align="center"></el-table-column>
            <el-table-column label="客户名称" prop="customerName" align="center">-->
            <!-- </el-table-column> -->
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
          </el-table>
        </template>
      </basic-container>
      <basic-container>
        <template>
          <div class="return-btn">
            <el-button type="primary" plain @click="goBack">返回</el-button>
          </div>
        </template>
      </basic-container>

      <!-- </el-tab-pane>
      </el-tabs>-->
    </template>
  </div>
</template>
<!-- 采购退货 -->
<script>
import { getDetail } from "@/api/crm/rep";
import { mapGetters } from "vuex";
import { fetchDict } from "@/util/util";
import Util from "@/util/pds/utils";
import { getStatusName } from "@/const/common/tool";
import { goBack } from "../../../util/util";
const cookieUtil = new Util();
export default {
  name: "addpurchaseback",
  data() {
    return {
      activeName: "orderDetail",
      tableData: [],
      sales_goods_type: [],
      data_report_status: [],
      topData: "",
      customerSn:"",
      reportSn: ""
    };
  },
  // created() {
  //   this.init()
  // },
  computed: {
    ...mapGetters(["permissions"])
  },
  beforeRouteEnter(to, from, next) {
    next(
      vm => (
        (vm.reportSn = vm.$route.query.res.reportSn),
        (vm.customerSn = vm.$route.query.res.customerSn)
      )
    );
   
  },
    // 监听属性
  watch: {
    
    reportSn: function(newValue, oldValue) {
      // 新值为空时使用已有的值
      this.init(oldValue && !newValue ? oldValue : newValue);
    }
  },
  methods: {
     // 返回按钮
    goBack(time = 1000) {
      goBack(this, time);

    },
    async init(reportSn) {
      if (!reportSn) {
        this.goBack();
        return;
      }
      const params = {
        reportSn: reportSn
      };
      await fetchDict("scm_sales_goods_type", this.sales_goods_type);
      await fetchDict("scm_data_report_status", this.data_report_status);
      getDetail(params).then(res => {
        console.log(res);
        
        this.tableData = res.data.data.detailList;
        this.topData = res.data.data;
        this.topData.reportStatus = getStatusName(
          this.data_report_status,
          this.topData.reportStatus
        );
        this.topData.detailList = getDetailList(
          this.sales_goods_type,
          this.topData.detailList
        );
        this.countCouponAmount();
      });
    },
    getTotalAmount() {
      let totalAmount = 0;
      this.tableData &&
        this.tableData.length &&
        this.tableData.map(item => {
          if (item.salesGoodsType !== "3")
            totalAmount += parseFloat(item.goodsNum * item.tradePrice);
        });
      this.$set(this.topData, "goodsTotalAmount", totalAmount);
      totalAmount += this.topData.otherAmount;
      return totalAmount;
    },
    // 计算优惠价格
    countCouponAmount() {
      const couponAmount = this.getTotalAmount() - this.topData.totalAmount;
      this.$set(this.topData, "couponAmount", couponAmount);
    },
    // backup: function() {
    //   this.$router.go(-1);
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
function getDetailList(typeList, dataList) {
  if (!Array.isArray(dataList)) return [];
  dataList = dataList.map(item => {
    item["goodsType"] = getStatusName(typeList, item.salesGoodsType);
    return item;
  });
  return dataList;
}
</script>

<style lang="scss">
.crumbs {
  margin: 20px 10px;
}
.io-goods-detail {
  margin-bottom: 10px;
}
.thumbUrl {
  display: inline-block;
}
.settle-accounts {
  text-align: right;
}
.basic-information {
  margin-top: 20px;
  font-weight: inherit;
}
.return-btn {
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
}
.tabContent {
  padding-left: 10px;
  .el-tabs__item {
    font-size: 20px;
  }
}
</style>
